<template>
  <div class="attraction-desktop" :class="{ 'resizing': isResizing }">
    <!-- 加载过渡效果 -->
    <LoadingTransition
      v-if="showLoading"
      @loading-complete="handleLoadingComplete"
    />

    <!-- 开场特效 -->
    <DesktopIntro
      v-if="showIntro"
      @close="handleIntroClose"
    />

    <!-- 左侧地图区域 -->
    <div class="map-section">
      <DraggableBackground
        ref="draggableBackground"
        :background-src="attractionData.backgroundImage"
        :markers="mapMarkers"
        :active-marker-id="activeMarkerId"
        :default-zoom="1.2"
        :min-zoom="1"
        :max-zoom="3"
        @marker-click="handleMarkerClick"
      />
      
      <!-- 地图控制面板 -->
      <div class="map-controls">
        <button class="control-btn" @click="resetView" title="重置视图">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
          重置视图
        </button>
        <button class="control-btn" @click="toggleFullscreen" title="全屏">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
            <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
          </svg>
          全屏
        </button>
      </div>
    </div>

    <!-- 右侧信息面板 -->
    <div class="info-panel" v-if="false">
      <!-- 景点基本信息 -->
      <div class="attraction-header">
        <div class="attraction-image">
          <img :src="attractionData.coverImage" :alt="attractionData.name" />
          <div class="image-overlay">
            <div class="rating-badge">
              <span class="rating-score">{{ attractionData.rating }}</span>
              <div class="stars">
                <span v-for="i in 5" :key="i" class="star" :class="{ filled: i <= Math.floor(attractionData.rating) }">★</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="attraction-info">
          <h1 class="attraction-name">{{ attractionData.name }}</h1>
          <div class="attraction-meta">
            <span class="distance">{{ attractionData.distance }}</span>
            <span class="status" :class="attractionData.status">{{ attractionData.statusText }}</span>
          </div>
          <p class="description">{{ attractionData.description }}</p>
          
          <!-- 特色标签 -->
          <div class="highlights">
            <span v-for="highlight in attractionData.highlights" :key="highlight" class="highlight-tag">
              {{ highlight }}
            </span>
          </div>
        </div>
      </div>

      <!-- 详细信息卡片 -->
      <div class="info-cards">
        <!-- 开放时间 -->
        <div class="info-card">
          <div class="card-header">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"/>
            </svg>
            <h3>开放时间</h3>
          </div>
          <p>{{ attractionData.openingHours }}</p>
        </div>

        <!-- 门票价格 -->
        <!-- <div class="info-card">
          <div class="card-header">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M17,13H13V17H11V13H7V11H11V7H13V11H17V13Z"/>
            </svg>
            <h3>门票价格</h3>
          </div>
          <div class="price-info">
            <span class="price">¥{{ attractionData.ticketPrice }}</span>
            <span class="price-note">{{ attractionData.priceNote }}</span>
          </div>
        </div> -->

        <!-- 设施服务 -->
        <div class="info-card facilities-card">
          <div class="card-header">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z"/>
            </svg>
            <h3>设施服务</h3>
          </div>
          <div class="facilities-grid">
            <div v-for="facility in attractionData.facilities" :key="facility.name" class="facility-item">
              <span class="facility-icon">{{ facility.icon }}</span>
              <span class="facility-name">{{ facility.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <!-- <div class="action-buttons">
        <button class="btn btn-secondary" @click="shareAttraction">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
            <path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z"/>
          </svg>
          分享
        </button>
        <button class="btn btn-secondary" @click="addToFavorites">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5 2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"/>
          </svg>
          收藏
        </button>
        <button class="btn btn-primary" @click="planRoute">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,6.5A5.5,5.5 0 0,1 17.5,12A5.5,5.5 0 0,1 12,17.5A5.5,5.5 0 0,1 6.5,12A5.5,5.5 0 0,1 12,6.5Z"/>
          </svg>
          规划路线
        </button>
      </div> -->
    </div>

    <!-- 标记点详情弹窗 -->
    <MarkerPopup
      :visible="showMarkerPopup"
      :marker-data="selectedMarker"
      @close="closeMarkerPopup"
      @action="handleMarkerAction"
    />
  </div>
</template>

<script>
import DraggableBackground from '@/components/DraggableBackground.vue'
import MarkerPopup from '@/components/MarkerPopup.vue'
import DesktopIntro from '@/components/DesktopIntro.vue'
import LoadingTransition from '@/components/LoadingTransition.vue'
import { getAllPcList,getBackPcgroundImage } from '@/api'

export default {
  name: 'AttractionDesktop',
  components: {
    DraggableBackground,
    MarkerPopup,
    DesktopIntro,
    LoadingTransition
  },
  data() {
    return {
      showLoading: true, // 显示加载过渡效果
      showIntro: false, // 先不显示开场特效，等加载完成后再判断
      showMarkerPopup: false,
      selectedMarker: {},
      activeMarkerId: null,
      screenOrientation: 'landscape', // PC端默认横屏
      isResizing: false, // 窗口调整状态标记
      attractionData: {
        name: '廉洁文化地图',
        backgroundImage: '', //require("@/assets/imgs/旅游.png")
        coverImage: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
        rating: 4.8,
        distance: '距离您 2.5km',
        status: 'open',
        statusText: '正常开放',
        description: '廉洁文化地图廉洁文化地图廉洁文化地图廉洁文化地图廉洁文化地图廉洁文化地图廉洁文化地图廉洁文化地图廉洁文化地图廉洁文化地图廉洁文化地图廉洁文化地图廉洁文化地图廉洁文化地图',
        highlights: ['世界自然遗产', '国家5A级景区', '童话世界', '四季皆美', '摄影天堂'],
        facilities: [
          { icon: '🚌', name: '观光车' },
          { icon: '🍽️', name: '餐厅' },
          { icon: '🛍️', name: '购物' },
          { icon: '📷', name: '拍照点' },
          { icon: '♿', name: '无障碍' },
          { icon: '🚻', name: '洗手间' },
          { icon: '🏥', name: '医疗站' },
          { icon: '📞', name: '咨询服务' }
        ],
        openingHours: '08:00 - 18:00（旺季：4月1日-11月15日）\n08:30 - 17:30（淡季：11月16日-3月31日）',
        ticketPrice: 169,
        priceNote: '成人票（含观光车）'
      },
      // 地图标记点数据与移动端相同
      mapMarkers: [
        {
          id: 1,
          name: '五花海',
          x: 35,
          y: 25,
          type: 'highlight',
          icon: '🌊',
          showPulse: true,
          description: '九寨沟最著名的海子之一，因湖底的钙华沉积、各种色泽的藻类以及岸边五彩斑斓的林木倒影而得名。',
          image: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
          features: ['最佳拍照点', '四季变色', '清澈见底'],
          openTime: '全天开放',
          rating: 4.9,
          tips: '最佳观赏时间为上午10点到下午3点，光线充足时湖水颜色最为绚烂。',
          actions: [
            { text: '查看路线', type: 'primary' },
            { text: '收藏', type: 'default' }
          ]
        },
        {
          id: 2,
          name: '珍珠滩瀑布',
          x: 60,
          y: 40,
          type: 'viewpoint',
          icon: '💎',
          description: '九寨沟最壮观的瀑布之一，水流从高处倾泻而下，形成珍珠般的水花。',
          image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
          features: ['壮观瀑布', '负氧离子丰富', '彩虹常现'],
          openTime: '08:00 - 18:00',
          rating: 4.8,
          tips: '雨后观赏效果最佳，容易看到彩虹。注意防滑。',
          actions: [
            { text: '导航前往', type: 'primary' },
            { text: '分享', type: 'default' }
          ]
        },
        {
          id: 3,
          name: '诺日朗餐厅',
          x: 45,
          y: 60,
          type: 'restaurant',
          icon: '🍽️',
          description: '景区内主要的餐饮服务点，提供藏式和川式美食。',
          features: ['藏式美食', '川菜', '素食选择'],
          openTime: '11:00 - 14:00, 17:00 - 20:00',
          rating: 4.2,
          tips: '建议提前预订，用餐高峰期人较多。',
          actions: [
            { text: '在线预订', type: 'primary' },
            { text: '查看菜单', type: 'default' }
          ]
        },
        {
          id: 4,
          name: '观光车站',
          x: 25,
          y: 75,
          type: 'facility',
          icon: '🚌',
          description: '景区观光车停靠站，可乘坐观光车前往各个景点。',
          features: ['观光车服务', '休息区', '问询处'],
          openTime: '07:30 - 18:30',
          tips: '观光车每15分钟一班，建议查看时刻表。',
          actions: [
            { text: '查看班次', type: 'primary' }
          ]
        },
        {
          id: 5,
          name: '镜海',
          x: 70,
          y: 20,
          type: 'highlight',
          icon: '🪞',
          showPulse: true,
          description: '以完美的倒影闻名，湖面如镜，倒映着周围的雪山和森林。',
          image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
          features: ['完美倒影', '摄影圣地', '宁静致远'],
          openTime: '全天开放',
          rating: 4.7,
          tips: '清晨无风时倒影效果最佳，是摄影的黄金时间。',
          actions: [
            { text: '设为目的地', type: 'primary' },
            { text: '收藏', type: 'default' }
          ]
        },
        {
          id: 6,
          name: '游客服务中心',
          x: 15,
          y: 85,
          type: 'facility',
          icon: 'ℹ️',
          description: '提供游客咨询、失物招领、医疗救助等服务。',
          features: ['游客咨询', '医疗救助', '失物招领', '轮椅租借'],
          openTime: '07:00 - 19:00',
          tips: '如有紧急情况或需要帮助，请及时联系服务中心。',
          actions: [
            { text: '联系客服', type: 'primary' }
          ]
        }
      ]
    }
  },
  mounted() {
    this.initResizeListener()
    this.updateOrientation()
  },
  beforeDestroy() {
    this.removeResizeListener()
  },
  methods: {
    handleLoadingComplete() {
      this.showLoading = false
      // 加载完成后，判断是否需要显示开场特效
      this.showIntro = !localStorage.getItem('desktop_intro_viewed')
      console.log('PC端加载完成，开始体验')
    },

    handleIntroClose() {
      this.showIntro = false
      // 标记用户已观看过开场特效
      localStorage.setItem('desktop_intro_viewed', 'true')
      console.log('PC端开场特效关闭，开始体验')
    },

    async getBac() {
      const res = await getBackPcgroundImage('pc_background_image')
      console.log("背景图", res)
      if(res.code == 200) {
        this.attractionData.backgroundImage = res.data.configValues || ''
      }
    },
    async fetchLists() {
      const res = await getAllPcList('pc_background_image')
      console.log("标注", res)
      this.mapMarkers = res.data.map(el => {
        return {
          ...el,
          name: el.buildingName,
          x: el.largeScreenLeft - 0,
          y: el.largeScreenTop - 0,
          type: 'highlight',
          showPulse: true,
          description: el.buildingIntroduction,
          image: el.buildingImgUrl,
          // actions: [
          //   { text: '查看路线', type: 'primary' },
          //   { text: '收藏', type: 'default' }
          // ]
        }
      })
    },
    handleMarkerClick(marker) {
      console.log('PC端: 标记点被点击', marker)
      this.selectedMarker = marker
      this.activeMarkerId = marker.id
      this.showMarkerPopup = true
    },
    closeMarkerPopup() {
      this.showMarkerPopup = false
      this.activeMarkerId = null
      this.selectedMarker = {}
    },
    handleMarkerAction(action) {
      console.log('标记点操作:', action)
      // 处理标记点操作逻辑与移动端相同
      switch(action.text) {
        case '查看路线':
        case '导航前往':
        case '设为目的地':
          this.showRoute(this.selectedMarker)
          break
        case '收藏':
          this.addToFavorites(this.selectedMarker)
          break
        case '在线预订':
          this.makeReservation(this.selectedMarker)
          break
        case '查看菜单':
          this.showMenu(this.selectedMarker)
          break
        case '查看班次':
          this.showSchedule(this.selectedMarker)
          break
        case '联系客服':
          this.contactService()
          break
        default:
          console.log('未知操作:', action)
      }
    },
    resetView() {
      this.$refs.draggableBackground?.resetZoom?.()
    },
    toggleFullscreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
    },
    shareAttraction() {
      alert(`分享 ${this.attractionData.name}`)
    },
    addToFavorites() {
      alert(`已将 ${this.attractionData.name} 添加到收藏夹`)
    },
    planRoute() {
      alert(`正在为您规划前往 ${this.attractionData.name} 的路线...`)
    },
    showRoute(marker) {
      alert(`正在为您规划前往 ${marker.name} 的路线...`)
    },
    makeReservation(marker) {
      alert(`正在跳转到 ${marker.name} 的预订页面...`)
    },
    showMenu(marker) {
      alert(`正在查看 ${marker.name} 的菜单...`)
    },
    showSchedule() {
      alert(`正在查看观光车班次信息...`)
    },
    contactService() {
      alert(`正在连接客服...`)
    },

    // 屏幕尺寸变化监听相关方法（PC端主要监听窗口大小变化）
    initResizeListener() {
      // 监听窗口大小变化
      window.addEventListener('resize', this.handleResize)

      // 监听全屏状态变化
      document.addEventListener('fullscreenchange', this.handleFullscreenChange)
      document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange)
      document.addEventListener('mozfullscreenchange', this.handleFullscreenChange)
      document.addEventListener('MSFullscreenChange', this.handleFullscreenChange)
    },

    removeResizeListener() {
      window.removeEventListener('resize', this.handleResize)
      document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
      document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange)
      document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange)
      document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange)
    },

    updateOrientation() {
      const width = window.innerWidth
      const height = window.innerHeight
      this.screenOrientation = width > height ? 'landscape' : 'portrait'
    },

    handleResize() {
      // 防抖处理
      clearTimeout(this.resizeTimer)
      this.resizeTimer = setTimeout(() => {
        console.log('PC端窗口大小发生变化')
        this.isResizing = true

        const oldOrientation = this.screenOrientation
        this.updateOrientation()

        this.refreshContent()

        if (oldOrientation !== this.screenOrientation) {
          console.log('PC端屏幕方向改变:', oldOrientation, '->', this.screenOrientation)
        }

        this.isResizing = false
      }, 200)
    },

    handleFullscreenChange() {
      console.log('全屏状态发生变化')
      // 延迟处理，等待全屏动画完成
      setTimeout(() => {
        this.updateOrientation()
        this.refreshContent()
        console.log('全屏状态处理完成')
      }, 300)
    },

    refreshContent() {
      // 刷新地图组件
      if (this.$refs.draggableBackground) {
        this.$nextTick(() => {
          // 重新初始化地图尺寸
          this.$refs.draggableBackground.handleResize?.()

          // 延迟重新计算布局
          setTimeout(() => {
            this.$refs.draggableBackground.centerMap?.()
            console.log('PC端地图组件已重新渲染')
          }, 100)
        })
      }

      // 强制重新渲染组件
      this.$forceUpdate()

      // 触发自定义事件，通知其他组件
      this.$emit('layout-changed', {
        orientation: this.screenOrientation,
        width: window.innerWidth,
        height: window.innerHeight,
        isFullscreen: !!document.fullscreenElement
      })
    }
  },
  created(){
    this.getBac()
    this.fetchLists()
  }
}
</script>

<style lang="scss" scoped>
.attraction-desktop {
  display: flex;
  height: 100vh;
  background: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: all 0.3s ease;

  &.resizing {
    opacity: 0.9;

    &::after {
      content: '正在调整布局...';
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 12px 24px;
      border-radius: 20px;
      font-size: 14px;
      z-index: 9998;
      backdrop-filter: blur(10px);
    }
  }
}

// 左侧地图区域
.map-section {
  flex: 1;
  position: relative;
  background: #000;
  border-radius: 0 20px 20px 0;
  overflow: hidden;
  margin: 20px 0 20px 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.map-controls {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 200;
  display: flex;
  gap: 12px;
}

.control-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  &:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
  }

  svg {
    opacity: 0.7;
  }
}

// 右侧信息面板
.info-panel {
  width: 480px;
  background: white;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-radius: 20px 0 0 20px;
  margin: 20px 20px 20px 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

// 景点头部信息
.attraction-header {
  padding: 30px;
  border-bottom: 1px solid #f0f2f5;
}

.attraction-image {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-overlay {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .rating-badge {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);

    .rating-score {
      font-size: 16px;
      font-weight: 700;
    }

    .stars {
      display: flex;
      gap: 2px;

      .star {
        font-size: 12px;
        color: #666;

        &.filled {
          color: #ffd700;
        }
      }
    }
  }
}

.attraction-info {
  .attraction-name {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 16px 0;
    line-height: 1.2;
  }

  .attraction-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;

    .distance {
      color: #666;
      font-size: 16px;
      font-weight: 500;
    }

    .status {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;

      &.open {
        background: #e8f5e8;
        color: #2d7d32;
      }
    }
  }

  .description {
    color: #555;
    line-height: 1.7;
    font-size: 16px;
    margin-bottom: 24px;
  }

  .highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .highlight-tag {
      padding: 8px 16px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }
  }
}

// 信息卡片
.info-cards {
  flex: 1;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e2e8f0;

  .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;

    svg {
      color: #3b82f6;
    }

    h3 {
      font-size: 18px;
      font-weight: 700;
      color: #1e293b;
      margin: 0;
    }
  }

  p {
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
  }

  .price-info {
    display: flex;
    align-items: baseline;
    gap: 12px;

    .price {
      font-size: 28px;
      font-weight: 800;
      color: #dc2626;
    }

    .price-note {
      color: #64748b;
      font-size: 14px;
    }
  }
}

.facilities-card {
  .facilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;

    .facility-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 12px;
      background: white;
      border-radius: 12px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }

      .facility-icon {
        font-size: 24px;
        margin-bottom: 8px;
      }

      .facility-name {
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
      }
    }
  }
}

// 操作按钮
.action-buttons {
  padding: 30px;
  border-top: 1px solid #f0f2f5;
  display: flex;
  gap: 12px;

  .btn {
    flex: 1;
    height: 52px;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    &:hover {
      transform: translateY(-2px);
    }

    &.btn-secondary {
      background: #f1f5f9;
      color: #475569;

      &:hover {
        background: #e2e8f0;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }
    }

    &.btn-primary {
      background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
      color: white;

      &:hover {
        background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
      }
    }
  }
}

// 响应式设计
@media (max-width: 1400px) {
  .info-panel {
    width: 420px;
  }

  .attraction-info .attraction-name {
    font-size: 28px;
  }

  .facilities-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 1200px) {
  .attraction-desktop {
    flex-direction: column;
  }

  .map-section {
    height: 60vh;
    margin: 20px;
    border-radius: 20px;
  }

  .info-panel {
    width: auto;
    height: 40vh;
    margin: 0 20px 20px 20px;
    border-radius: 20px;
  }

  .info-cards {
    flex-direction: row;
    overflow-x: auto;
    padding: 20px 30px;

    .info-card {
      min-width: 280px;
    }
  }
}

// 滚动条样式
.info-panel::-webkit-scrollbar {
  width: 6px;
}

.info-panel::-webkit-scrollbar-track {
  background: transparent;
}

.info-panel::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;

  &:hover {
    background: #94a3b8;
  }
}
</style>
